// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'



// 引入css文件
import "./index.css"

//组件的props

//组件是封闭的 要接收外部的数据应该通过props来实现
// props的作用:接收传递给组件的数据
//传递数据: 给组件标签添加属性
//接收数据: 函数组件通过参数props接收数据 类组件通过this.props接收数据



// 函数组件 传递数据

// const MyApp=(props)=>{
//     return (
//         <div>
//             <h1>props:{props.name}</h1>
//             <h1>props:{props.age}</h1>
//             <h1>props:{props.obj}</h1>
//         </div>
//     )
// }
// 类组件 传递数据
class MyApp extends React.Component {
    // 建议使用构造器 接收props
    constructor(props){
        super(props)
        console.log(this.props)
    }
    render() {
        // console.log(this.props)
        const { props } = this
        //只可以读取 不可以修改
        // TypeError: Cannot assign to read only property 'name' of object '#<Object>'
        // props.name='tom'
        return (
            <div>
                <h1>props:{props.name}</h1>
                <h1>props:{props.age}</h1>
                <h1>props:{props.colors.join(',')}</h1>
            </div>
        )
    }
}


//3 渲染react元素
ReactDOM.render(<MyApp
    tag={<p>这是段落</p>}
    fn={() => console.log("这是一个函数")}
    colors={['red', 'blue', 'greens']}
    name='jack'
    age={12} />,
    document.getElementById('root'))
